<template>
	<view class="goods-detail shangpin">
		<block v-if="goods!=''">
			<u-swiper imgMode="heightFix" :list="list5" @change="e => current = e.current" :autoplay="false"
				height="700rpx" keyName="image_url">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
			<view class="goods-container">
				<view class="goods-top">
					<view class="goods-price">
						<view class="left">
							<text>¥</text>
							<text class="price">{{goods.goods_price}}</text>
						</view>
						<view class="right" @click="fenxiang">
							<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/wx-share.png"
								mode="widthFix"></image>
							<text>分享</text>
						</view>
					</view>
					<view class="goods-name">{{goods.goods_name}}</view>
					<view class="goods-remark" v-if="goods.goods_remark">{{goods.goods_remark}}</view>
					<view class="yunfei">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/yunfei.png"
							mode="widthFix"></image>
						<text>运费：¥{{goods.ship_price}}</text>
					</view>
				</view>
				<view class="goods-store" @click="toStoreDetail()">
					<image :src="goods.store_logo" mode="widthFix" class="store-img"></image>
					<view class="right">
						<view class="right-left">
							<view class="store-name">{{goods.store_name}}</view>
							<view class="dizhi">地址：{{goods.store_address}}</view>
						</view>
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/more-grey.png"
							mode="widthFix" class="more-img"></image>
					</view>
				</view>
			</view>
			<view class="shop-goods-xq">
				<view class="title">
					<text class="line"></text>
					<text class="xq-tit">商品详情</text>
					<text class="line"></text>
				</view>
				<view v-html="goods.goods_content" class="goods-content"></view>
			</view>
			<view class="show_title" v-if="false">
				<view class="goods_price">
					<view class="left">
						￥<text class="show_title_text1">{{goods.goods_price}}</text>
						<text class="level" v-if="goods.level_name">{{goods.level_name}}</text>
					</view>
					<view class="right">
						<text class="show_title_text5">总销量：{{goods.sales_sum}}</text>
					</view>
				</view>
				<view class="market_price" v-if="false">
					<text class="show_title_text2">￥{{goods.market_price}}</text>
				</view>
				<text class="goods_name">{{goods.goods_name}}</text>
				<text class="goods_remark" v-if="goods.goods_remark">{{goods.goods_remark}}</text>
				<view class="show_title_flex" v-if="false">
					<view class="show_title_flex1">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/mianyunfei.png">
						</image>
						<text class="show_title_text4">运费￥0.00</text>
					</view>
					<view class="show_title_flex2">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/zoushi.png"></image>
						<text class="show_title_text5">总销量：{{goods.sales_sum}}</text>
					</view>
				</view>
			</view>
			<view style="height: 80rpx;background: none;margin-top: 0;"></view>
			<view class="goods-bot">
				<view class="left">
					<view class="left-item" @tap='goIndex()'>
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/goods-sy.png"
							mode="widthFix"></image>
						<view class="text">首页</view>
					</view>
					<view class="left-item">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/goods-kf.png"
							mode="widthFix"></image>
						<view class="text">客服</view>
					</view>
					<view class="left-item" @click="collection">
						<image
							:src="edit==1?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/shoucang2.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/shoucang1.png'"
							mode="widthFix"></image>
						<view class="text" v-if="!edit">收藏</view>
						<view class="text" v-else>取消收藏</view>
					</view>
				</view>
				<view class="right">
					<button class="buy-now" @click="buy_now">立即购买</button>
				</view>
			</view>
		</block>
		<u-popup bgColor="transparent" :safeAreaInsetBottom="false" :safeAreaInsetTop="false" :show="show"
			@close="close" @open="open">
			<view class="info-container">
				<view class="u_popup_flex">
					<image :src="item_img" mode="widthFix" class="item_img" />
					<view class="u_popup_flex_c">
						<text class="u_popup_flex_text1">
							<text>￥</text>
							<text class="price">{{goods_price*value}}</text>
						</text>
						<text class="u_popup_flex_text2">库存{{item_store_count}}</text>
						<text class="u_popup_flex_text3">已选:{{item_str}}</text>
					</view>
					<image @click="show=false"
						src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/goods/goods-close.png"
						mode="widthFix" class="close-img"></image>
				</view>
				<view class="u_popup_2">
					<view class="u_popup_c">
						<view class="u_popup_c_item" v-for="(item,index) in filter_spec" :key="item.spec_id">
							<view class="u_popup_c_item_tit">{{item.name}}</view>
							<view class="u_popup_c_item_con">
								<text @tap="changeItem(index,child.id,childIndex)"
									:class="{'act':child.id==item.selected}" v-for="(child,childIndex) in item.child"
									:key="child.id">{{child.item}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="u_popup_3">
					<text>数量</text>
					<view class="">
						<u-number-box v-model="value" button-size="26" inputWidth="45" bgColor="#F7F7F7"
							:max="item_store_count" @change="valChange"></u-number-box>
					</view>
				</view>
				<view class="btn-container">
					<button class="btn3" @click="addcart">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				list5: [],
				current: 0,
				show: false,
				value: 1,
				index: 0,
				item_id: 0,
				index3: '',
				k_name: '',
				k_price: '',
				goods: '',
				goods_price: 0.00,
				item_img: '',
				item_store_count: 0,
				filter_spec: [],
				spec_goods_price: [],
				k_id: 0,
				//1加入购物车2立即购买
				buy_type: 1,
				//是否收藏
				edit: 0,
				option_id: 0,
				item_str: '',
				item_name: '',
				loginShow: false,
				loginDisabled: false,
				reid: 0,
				id: 0
			}
		},
		onLoad(e) {
			_this = this
			if (e.reid) {
				_this.reid = e.reid
			}
			//加入历史足迹
			this.option_id = e.id
			if (this.option_id == undefined) {
				uni.$u.toast("提交参数有误")
				setTimeout(() => {
					uni.navigateBack({})
				}, 2000)
			}
			// #ifdef MP-WEIXIN
			_this.login()
			// #endif
			_this.id = e.id
			this.getgoods(e.id, this.user_id)
		},
		onShareAppMessage() {
			if (_this.goods != '') {
				return {
					title: _this.goods.goods_name,
					path: '/pages/cart/show?reid=' + _this.user_id + '&id=' + _this.goods.goods_id,
					imageUrl: _this.goods.goods_img
				}
			}
		},
		methods: {
			fenxiang() {
				uni.navigateTo({
					url: `/pages/goods/goods-share?id=${_this.id}`
				})
			},
			async getPhoneNumber(e) {
				if (e.target.errMsg == "getPhoneNumber:ok") {
					_this.loginDisabled = true
					let res = {
						'encryptedData': e.target.encryptedData,
						'iv': e.target.iv,
						'sessionKey': uni.getStorageSync('sessionKey'),
						'tuid': uni.getStorageSync('tuid'),
						'reid': _this.reid,
					}
					const data = await _this.$post('api/weixin_mobile', res)
					if (data.code == 200) {
						uni.$u.toast(data.msg)
						//存入用户信息
						_this.$u.vuex('user_id', data.data.user.user_id)
						//存入token
						_this.$u.vuex('user_token', data.data.user.user_token)
					} else {
						uni.$u.toast(data.msg)
					}
					setTimeout(() => {
						_this.loginShow = false
						_this.loginDisabled = false
					}, 2000)
				} else {
					uni.$u.toast('获取失败')
					_this.loginShow = false
				}
			},
			async login() {
				// #ifdef MP-WEIXIN
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: function(loginRes) {
						_this.wx_login(loginRes.code)
					},
					fail(fail) {
						console.log(fail)
					}
				});
				// #endif
			},
			async wx_login(code) {
				let res = {
					'code': code
				}
				const data = await _this.$post('api/weixin_login', res)
				if (data.code == 200) {
					let openid = data.data.openid
					let sessionKey = data.data.sessionKey
					let tuid = data.data.tuid
					uni.setStorageSync('openid', openid)
					uni.setStorageSync('sessionKey', sessionKey)
					uni.setStorageSync('tuid', tuid)
				}
			},
			//跳转 1首页2购物车
			jump(type) {
				if (type == 1) {
					this.$u.route({
						url: "pages/index/index",
						type: "switchTab"
					})
				} else {
					this.$u.route({
						url: "pages/cart/cart",
						type: "switchTab"
					})
				}
			},
			toStoreDetail() {
				uni.navigateTo({
					url: `/pages/goods/store-detail?store_id=${this.goods.store_id}`
				})
			},
			//选择规格
			changeItem(parent_index, item_id, child_index) {
				if (item_id == this.filter_spec[parent_index]['selected']) {
					return;
				}
				this.filter_spec[parent_index]['selected'] = item_id
				if (this.filter_spec[parent_index]['child'][child_index]['image'] != null) {
					this.item_img = this.filter_spec[parent_index]['child'][child_index]['image']
				}
				this.changePrice();
			},
			//计算价格
			changePrice() {
				if (this.filter_spec.length == 0) {
					return;
				}
				var spec_items = this.spec_goods_price
				var sel = []
				var str = ''
				for (let i = 0; i < this.filter_spec.length; i++) {
					for (let j = 0; j < this.filter_spec[i]['child'].length; j++) {
						var items = this.filter_spec[i]['child'];
						if (this.filter_spec[i]['selected'] == items[j]['id']) {
							sel.push(items[j]['id'])
							str += items[j]['item'] + " "
						}
					}
				}
				this.item_name = str + " "
				this.item_str = str + " " + this.value + "件"
				var key = sel.sort().join('_')
				var index = spec_items.findIndex(res => res['key'] == key);
				if (index != -1) {
					this.goods_price = spec_items[index]['price']
					this.item_id = spec_items[index]['item_id']
					this.item_store_count = spec_items[index]['store_count']
				}
			},
			//获取商品信息
			async getgoods(goods_id, user_id) {
				const params = {
					id: goods_id,
				}
				const data = await _this.$post('api/goods_xq', params)
				this.list5 = data.data.goods_imgs
				this.goods = data.data.goods
				this.goods_price = data.data.goods.goods_price
				this.item_id = data.data.item_id
				this.item_img = data.data.item_img
				this.item_store_count = data.data.item_store_count
				this.filter_spec = data.data.filter_spec
				this.spec_goods_price = data.data.spec_goods_price
				this.item_str = data.data.item_str
				this.edit = data.data.edit
			},
			join_cart() {
				this.buy_type = 1
				this.show = true
			},
			buy_now() {
				// #ifdef MP || H5
				if (!this.isLogin) {
					uni.$u.route({
						url: '/pages/auth/mobile-login'
					})
					return
				}
				// #endif
				this.buy_type = 2
				this.show = true
			},
			open() {},
			close() {
				this.show = false
			},
			valChange(e) {
				this.value = e.value
				this.item_str = this.item_name + " " + this.value + "件"
				// console.log('当前值为: ' + e.value)
			},
			//跳转到登录页面
			loginto() {
				this.$u.route({
					url: 'pages/auth/login'
				})
			},
			//收藏和取消收藏
			async collection() {
				if (this.user_id == 0) {
					_this.loginShow = true
					return
				}
				const params = {
					goods_id: this.goods.goods_id,
					type: this.edit == 0 ? 1 : 2
				}
				const data = await _this.$post('api/EditCollect', params)
				if (data.code == 200) {
					this.edit = this.edit == 0 ? 1 : 0
				} else {
					this.$u.toast(data.msg)
				}
			},
			//加入购物车/立即购买
			async addcart() {
				if (this.buy_type == 1) {
					const params = {
						goods_id: this.goods.goods_id,
						item_id: this.item_id,
						goods_num: this.value
					}
					const data = await AddCart(params)
					if (data.code == 200) {
						this.$u.toast(data.msg)
					} else {
						this.$u.toast(data.msg)
					}
					this.show = false
				} else {
					//跳转到确认订单页面
					this.$u.route({
						url: 'pages/order/order-confirm',
						params: {
							action: 'now',
							goods_id: this.goods.goods_id,
							goods_num: this.value,
							item_id: this.item_id
						}
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	@import "@/static/css/goods.scss";

	.info-container {
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.u_popup_flex {
		width: 100%;
		display: flex;
		padding: 20rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		position: relative;

		.item_img {
			width: 172rpx;
			height: 158rpx;
			border-radius: 10rpx;
		}

		.u_popup_flex_c {
			margin-left: 20rpx;
			@include flex-box(column, space-around);

			.u_popup_flex_text1 {
				font-size: 30rpx;
				color: $theme-F94A36;

				.price {
					font-size: 40rpx;
				}
			}

			.u_popup_flex_text2 {
				color: $color-919191;
			}

			.u_popup_flex_text3 {}
		}

		.close-img {
			position: absolute;
			width: 50rpx;
			right: 30rpx;
			top: 20rpx;
		}
	}

	.u_popup_2 {
		padding: 0 30rpx;
		margin-top: 30rpx;

		.u_popup_c {
			border-bottom: $global-border;
			padding-bottom: 30rpx;

			.u_popup_c_item {
				&:not(:last-child) {
					margin-bottom: 10rpx;
				}

				.u_popup_c_item_tit {
					margin-bottom: 10rpx;
				}

				.u_popup_c_item_con {
					display: flex;
					flex-wrap: wrap;

					text {
						line-height: 50rpx;
						height: 50rpx;
						padding: 0 30rpx;
						border-radius: 30rpx;
						font-size: 24rpx;
						margin-right: 10rpx;
						min-width: 50rpx;
						text-align: center;
						border: 2rpx solid $color-919191;
					}

					.act {
						background: #F6FFF7;
						border-color: $theme-color;
						color: $theme-color;
					}
				}
			}
		}
	}

	.u_popup_3 {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.btn-container {
		padding: 10rpx 30rpx 0 30rpx;
		height: 100rpx;
		box-sizing: border-box;
		box-shadow: 0px -3px 8rpx 0 rgba($color: #999999, $alpha: 0.2);

		.btn3 {
			border-radius: 40rpx;
			color: #fff;
			background: $theme-color;
			font-weight: 500;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
		}
	}


	.show_guanggao {
		margin: 0 0 120rpx 0;

		.show_guanggao_list {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 0 20rpx;

			.show_guanggao_text1 {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.show_guanggao_1 {
			padding: 30rpx 20rpx 0 20rpx;
		}
	}

	.border-red {
		padding: 20rpx;
		border-bottom: 2px solid $theme-color;
	}

	.show_guanggao_img1 {
		width: 100%;
		height: 1095rpx;
	}
</style>